<template>
	<view>
		<view class="header">
			<view class="flex h-top">
				<view class="userinfo" @click="toLogin">
					<view class="face"><image :src="userInfo.avatar || (imgSrcUrl + 'head.png')"></image></view>
					<view class="info" v-if="hasLogin"><!-- 是否登录 -->
						<view class="username"><!-- userInfo.memberRole==0 根据角色显示内容-->
							{{userInfo.nickname || '未登录'}}
							<image class="vip-img mar-left-15" src="https://web.suqzp.com/public/icon/vip.png"></image>
							<image class="rz-img mar-left-15" src="https://web.suqzp.com/public/icon/rz.png"></image>
						</view>
						<!-- <view class="integral">15000858802</view> -->
					</view>
					<view class="info" v-else>
						<view class="username">未登录</view>
						<view class="integral">点击可登录</view>
					</view>
				</view>
				<view class="setting" @click="toUserInfo"><image src="https://web.suqzp.com/public/icon/sz.png"></image></view>
			</view>
			<!-- 用户端 -->
			<view class="integralbox flex jcsb">				
				<view class="i-1"  @click="see(1)">
					<text class="fs-38">{{userInfo.totalScore}}</text>
					<text class="fs-26 mar-top-10">积分</text>
				</view>
				<view class="i-1" @click="see(2)">
					<text class="fs-38">0</text>
					<text class="fs-26 mar-top-10">优惠券</text>
				</view>
			</view>
			<!-- 招聘端 -->
			<!-- <view class="integralbox flex jcsb">
				<view class="i-1 w-25" @click="lookClick(1)">
					<text class="fs-38">1501</text>
					<text class="fs-26 mar-top-10">谁看过</text>
				</view>
				<view class="i-1 w-25" @click="lookClick(2)">
					<text class="fs-38">11</text>
					<text class="fs-26 mar-top-10">沟通过</text>
				</view>
				<view class="i-1 w-25" @click="lookClick(3)">
					<text class="fs-38">11</text>
					<text class="fs-26 mar-top-10">面试</text>
				</view>
				<view class="i-1 w-25" @click="lookClick(4)">
					<text class="fs-38">11</text>
					<text class="fs-26 mar-top-10">收藏</text>
				</view>
			</view> -->
			<view class="vip-member flex jcsb">
				<text class="dis-i-block fs-32 fc-e4b">至尊VIP会员</text>
				<view class="dis-i-block fs-24 see" @click="see(3)">查看<image src="https://web.suqzp.com/public/icon/jiantou1.png"></image></view>
			</view>
		</view>
		<view class="orders">
			<!-- v-if="userInfo.memberRole==undefined || userInfo.memberRole==0" -->
			<view class="box" >
				<view class="label" v-for="(row, index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(row.Current,index)">
					<view class="icon">
						<img :src="row.img"/>
					</view>
					<view class="text-tc mar-top-10">{{ row.name }}</view>
				</view>
			</view>
			<!-- 招聘端显示 v-else-->
			<!-- <view class="box flex jcsb">
				<view class="label flex-1">3个在线职位</view>
				<image src="https://web.suqzp.com/public/jiantou2.png"  class="backicon" ></image>
			</view> -->
			
		</view>
		<!-- 招聘端显示 -->
		<view class="recruit-box">
			<view class="b-line  flex jcc">
				<view class="labels" v-for="(row, index) in orderTypeLise2.slice(0,3)" :key="row.name" hover-class="hover" @tap="toOrderType2(index)">
					<view class="icon">
						<img :src="row.img"/>
					</view>
					{{ row.name }}
				</view>
			</view>	
			<view class="flex jcc">
				<view class="labels" v-for="(row, index) in orderTypeLise2.slice(3,5)" :key="row.name" hover-class="hover" @tap="toOrderType2(index)">
					<view class="icon">
						<img :src="row.img"/>
					</view>
					{{ row.name }}
				</view>
			</view>
		</view>
		<!--用户端 v-if="userInfo.memberRole==undefined || userInfo.memberRole==0" -->
		<view class="commonly">
			<view class="fs-32 fc-32 pad-top-30">常用功能</view>
			<view class="flex">
				<view class="com-list" v-for="(item, index) in severList" :key="index" @click="toClickused(index)">
					<view class="gnicon">
						<image :src="item.icon"></image>
					</view>
					<text>{{item.name}}</text>
				</view>				
			</view>
		</view>
		<!-- 招聘端 -->
		<view class="commonly">
			<view class="fs-32 fc-32 pad-top-30">常用功能</view>
			<view class="flex mar-top-30">
				<view class="com-list" v-for="(item, index) in severList2" :key="index" @click="toClickused2(index)">
					<view class="funitem">
						<image :src="item.icon"></image>
					</view>
					<text>{{item.name}}</text>
				</view>				
			</view>
		</view>
		<view class="height-80" style="border-top: 24rpx solid #F5F5F5;"></view>
	</view>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
	computed: {
		...mapState(['userInfo']),
		...mapGetters(['hasLogin'])
	},
	data() {
		return {
			imgSrcUrl: this.$mConfig.imgSrcUrl,
			/* 用户端 */
			orderTypeLise: [
				//name-标题 icon-图标 badge-角标
				{ name: '酒店订单', Current:6,img: this.$mConfig.imgSrcUrl+'icon/1.png',url: this.$mRoutesConfig.userHotel},
				{ name: '待付款', Current:0, img: this.$mConfig.imgSrcUrl+'icon/2.png', url: this.$mRoutesConfig.userHotel},
				{ name: '待入住', Current:1, img: this.$mConfig.imgSrcUrl+'icon/3.png', url: this.$mRoutesConfig.userHotel},
				{ name: '已完成', Current:2, img: this.$mConfig.imgSrcUrl+'icon/4.png', url: this.$mRoutesConfig.userHotel}
			],
			/* 招聘端 */
			orderTypeLise2: [
				//name-标题 icon-图标 badge-角标
				{ name: '置顶职位',img: this.$mConfig.imgSrcUrl+'icon/zp1.png',  url: null },
				{ name: '畅聊卡', img: this.$mConfig.imgSrcUrl+'icon/zp2.png',  url:null},
				{ name: '搜索牛人卡',img:this.$mConfig.imgSrcUrl+ 'icon/zp3.png', url: null},
				{ name: '待定', img: this.$mConfig.imgSrcUrl+'icon/4.png', url: null },
				{ name: '急聘卡', img: this.$mConfig.imgSrcUrl+'icon/4.png', url: null }
			],
			/* 用户端求职 */
			severList: [
				{ name: '会员中心',icon: this.$mConfig.imgSrcUrl+'icon/cy1.png', url:this.$mRoutesConfig.vipCore}, 
				{ name: '简历', icon: this.$mConfig.imgSrcUrl+'icon/cy2.png', url:this.$mRoutesConfig.resumeIndex}, 
				{ name: '求职管理',icon: this.$mConfig.imgSrcUrl+'icon/cy3.png', url:this.$mRoutesConfig.jobAdmin},			
				{ name: '分销中心',icon: this.$mConfig.imgSrcUrl+'icon/cy4.png', url:this.$mRoutesConfig.distributionCenter},
				{ name: '业务员中心',icon: this.$mConfig.imgSrcUrl+'icon/cy5.png',url:this.$mRoutesConfig.SalesmanCenterLogin},
				{ name: '我的举报', icon: this.$mConfig.imgSrcUrl+'icon/cy6.png', url: this.$mRoutesConfig.myReport},
				{ name: '我的帖子', icon: this.$mConfig.imgSrcUrl+'icon/cy7.png', url: this.$mRoutesConfig.myPosts},
				{ name: '我的评论',icon: this.$mConfig.imgSrcUrl+'icon/cy8.png', url:this.$mRoutesConfig.myComments},
				{ name: '收藏', icon:this.$mConfig.imgSrcUrl+'icon/cy9.png', url:this.$mRoutesConfig.collect},
				{ name: '人才认证',icon: this.$mConfig.imgSrcUrl+'icon/cy10.png', url:this.$mRoutesConfig.talentAuth}, 
				{ name: '切换招聘端',icon: this.$mConfig.imgSrcUrl+'icon/cy11.png', url:'zhaopin' },
				{ name: '我要合作',icon: this.$mConfig.imgSrcUrl+'icon/cy12.png', url:this.$mRoutesConfig.myCooperation},
				{ name: '酒店入驻',icon: this.$mConfig.imgSrcUrl+'icon/cy13.png', url:this.$mRoutesConfig.HotelAuth},
				{ name: '商学院',icon: this.$mConfig.imgSrcUrl+'icon/cy14.png', url:this.$mRoutesConfig.BusinesSchool},
				{ name: '商学院认证',icon: this.$mConfig.imgSrcUrl+'icon/cy14.png', url:this.$mRoutesConfig.BusinesSchoolAuthent},
				{ name: '签到',icon: this.$mConfig.imgSrcUrl+'icon/cy15.png', url: this.$mRoutesConfig.signIn},
				{ name: '抽奖',icon: this.$mConfig.imgSrcUrl+'icon/cy16.png', url: null},				
			],
			
			/* 招聘端 */
			severList2: [
				{ name: '招聘数据', show:true,icon: this.$mConfig.imgSrcUrl+'icon/zp6.png', url: null}, 
				{ name: '我要招聘', show:true,icon: this.$mConfig.imgSrcUrl+'icon/zp6.png', url: this.$mRoutesConfig.recreit}, 
				{ name: '职位管理', show:true,icon: this.$mConfig.imgSrcUrl+'icon/zp6.png', url:this.$mRoutesConfig.positions}, 
				{ name: '道具', show:true,icon: this.$mConfig.imgSrcUrl+'icon/zp7.png', url: this.$mRoutesConfig.toolProps}, 
				{ name: '企业主页', show:true,icon: this.$mConfig.imgSrcUrl+'icon/zp8.png', url:this.$mRoutesConfig.addenterinfo},				
				{ name: '我的客服', show:true,icon:this.$mConfig.imgSrcUrl+ 'icon/zp9.png', url: null},
				{ name: '设置', show:true,icon:this.$mConfig.imgSrcUrl+ 'icon/zp10.png', url: null},			
				{ name: '切换求职者', show:true,icon:this.$mConfig.imgSrcUrl+ 'icon/zp11.png', url:'qiuzhi' }	
			],	
		};
	},
	mounted() {		
		console.log('是否一登录', this.hasLogin); 
		// 获取用户积分余额
		
	},
	methods: {
		/* 设置点击 */
		toUserInfo() {			
			if (this.hasLogin) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.system
				});
			}else{
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				});
			}			
		},
		//会员
		see(type){
			if (this.hasLogin) {
				if(type == 1){//积分
					
				}else if(type == 2){//优惠券
					this.$mRouter.push({
						route:this.$mRoutesConfig.coupon,
						query: {}
					});
				}else if(type == 3){//会员
					this.$mRouter.push({
						route: this.$mRoutesConfig.vipCore
					});
				}
			
			}else{
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				});
			}	
			
		},
		//用户点击订单类型
		toOrderType(Current,index) {
			if (this.hasLogin) {
				this.$mRouter.push({
					route: this.orderTypeLise[index].url,
					query: {
						status: Current
					}
				});
			}else{
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				});
			}			
		},
		//用户端常用功能点击跳转
		toClickused(index){
			var that = this
			if (this.hasLogin) {
				if(this.severList[index].url == "zhaopin"){
					uni.showModal({
						title: '',
						content: '确定切换到招聘？',
						success: res => {
							if (res.confirm) {
								that.switchRole(1);
							}
						}
					});
					return;
				}
				this.$mRouter.push({
					route: this.severList[index].url,
					query: {
						id: 1
					}
				});
			}else{
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				});
			}
		},
		//招聘端常用功能点击跳转		
		lookClick(type){
			if(type == 1){
				this.$mRouter.push({
					route: this.$mRoutesConfig.see,
					query: {}
				});
			}else if(type == 2){				
				this.$mRouter.push({
					route: this.$mRoutesConfig.communi,
					query: {}
				});
			}else if(type == 3){
				uni.navigateTo({
					url:'/pages/user/company/jobslist'
				})
			}
			
		},
		toClickused2(index){
			var that = this
			if (this.hasLogin) {
				if(this.severList2[index].url == "qiuzhi"){
					uni.showModal({
						title: '',
						content: '确定切换到求职？',
						success: res => {
							if (res.confirm) {
								that.switchRole(1);
							}
						}
					});
					return;
				}	
				if(this.severList2[index].url == this.$mRoutesConfig.addenterinfo || this.severList2[index].url == this.$mRoutesConfig.positions){
					var auditStatus = uni.getStorageSync('auditStatus');//我要招聘的审核状态
					if(auditStatus == 1){
						this.$mRouter.push({
							route: this.severList2[index].url,
							query: {
								id: 1
							}
						});
					}else if(auditStatus == 2){
						uni.showModal({
							title: '提示',
							content: '招聘信息审核失败，请重新提交',
							success: function(res) {
								if (res.confirm) {
									this.$mRouter.push({
										route: this.$mRoutesConfig.recreit,
										query: {
											id: 1
										}
									});								
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else if(auditStatus == 0){
						uni.showToast({
							title: '招聘信息正在审核中',
							icon:'none',
							duration: 2000
						});
					}
				}else{
					this.$mRouter.push({
						route: this.severList2[index].url,
						query: {
							id: 1
						}
					});
				}
			}else{
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				});
			}			
		},
		//切换角色
		async switchRole(role){
			let res = await this.$apis.switchRole({role:role});
			this.getUserInfo();
			console.log("res======",res);
			if(res.result){
				// 存在，直接切换
				console.log("存在，直接切换")
			}else{
				//不存在，跳转编辑
				console.log("不存在，跳转编辑")
				if(role==0){
					//跳转到简历编辑页面。
					this.$mRouter.push({
						route: this.$mRoutesConfig.personReume,
						query: {
							id: 1
						}
					});
				}else{
					this.$mRouter.push({
						route: this.$mRoutesConfig.enter
					});
				}
			}
		},	
		toLogin() {
			if (this.hasLogin) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.personReume,
					query: {
						id: 1
					}
				});
			} else {
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {
						id: 1
					}
				});
			}
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.header {	
	background: #8EC7F9;
	width: 92%;	
	height:354rpx;
	padding: 0 4%;
	.h-top{
		&.status {
			padding-top: var(--status-bar-height);
		}
		height: 180rpx;
		align-items: center;
		.userinfo {
			width: 90%;
			display: flex;
			.face {
				flex-shrink: 0;
				width: 120rpx;
				height: 120rpx;
				border:1px solid #fff;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			.info {
				width: 92%;
				padding:0 4%;
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;
				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx;
					.vip-img{
						width: 64rpx;
						height: 32rpx;
						display: inline-block;
						position: relative;
						top: 4rpx;
					}
					.rz-img{
						width: 36rpx;
						height: 36rpx;
						display: inline-block;
						position: relative;
						top: 4rpx;
					}
				}
				.integral {
					display: flex;
					align-items: center;
					height: 40upx;
					color: #fff;
					border-radius: 20upx;
					font-size: 24upx;
				}
			}
		}
		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.integralbox{
		.i-1{
			color: #fff;
			width: 50%;
			text-align: center;
			text{
				display: block;
			}
		}
		.w-25{
			width: 25%;
		}
	}
	.vip-member{
		height: 80rpx;
		background: #2E2E2E;
		border-top-left-radius: 24rpx;
		border-top-right-radius:24rpx;
		margin-top: 18rpx;
		padding: 0 32rpx;
		.fc-e4b{
			color: #E4BFA2;			
			line-height: 80rpx;
		}
		.see{
			margin-top: 20rpx;
			width: 110rpx;
			height: 40rpx;
			background: #E4BFA2;
			border-radius: 30rpx;
			line-height: 40rpx;
			text-align: center;
			image{
				width: 20rpx;
				height: 20rpx;
				display: inline-block;
			}
		}
	}
}
.hover {
	background-color: #eee;
}
.orders {
	width: 100%;
	display: flex;
	align-items: flex-start;
	margin-top: -1upx;
	border-bottom: 12rpx solid #F5F5F5;
	.box {
		width: 92%;
		padding: 0 4%;
		background-color: #fefefe;
		border-radius: 24upx;	
		margin-bottom: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.label {		
			margin-top: 38rpx;
			align-items: center;
			justify-content: center;
			flex-flow: wrap;
			width: 100%;
			color: #666666;
			font-size: 26upx;
			.icon {
				position: relative;
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto;
				.badge {
					position: absolute;
					width: 4vw;
					height: 4vw;
					background-color: #ec6d2c;
					top: -1vw;
					right: -1vw;
					border-radius: 100%;
					font-size: 20upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
				}
				image {
					width: 60rpx;
					height: 60rpx;
					z-index: 9;
				}
			}

			.label-icon {
				font-size: 48upx;
				color: $main-color;
			}
		}
	}
}
.list {
	width: 100%;
	border-bottom: solid 26upx #f1f1f1;
	.li {
		width: 92%;
		height: 100upx;
		padding: 0 4%;
		border-bottom: solid 1upx #e7e7e7;
		display: flex;
		align-items: center;
		&.noborder {
			border-bottom: 0;
		}
		.icon {
			flex-shrink: 0;
			width: 50upx;
			height: 50upx;
			image {
				width: 50upx;
				height: 50upx;
			}
		}
		.text {
			padding-left: 30upx;
			width: 100%;
			color: #666;
		}
		.to {
			flex-shrink: 0;
			width: 40upx;
			height: 40upx;
		}
		.icon-next {
			font-size: $font-size-34;
			color: $font-color-999;
		}
	}
}
.commonly{
	width: 88%;
	margin: 0 auto 40rpx;
	.fc-32{
		color: #323233;
	}
	.com-list{
		width: 25%;
		text-align: center;
		margin:10rpx 0 38rpx 0;
		.gnicon{
			width: 60rpx;
			height: 60rpx;
			display: block;
			margin: 0 auto;
			image{
				width: 60rpx;
				height: 60rpx;
				display: block;
			}
		}
		.funitem{
			width: 60rpx;
			height: 60rpx;
			display: block;
			margin: 0 auto;
			image{
				width:44rpx;
				height:46rpx;
			}	
		}
			
	}
	.com-list:nth-child(1){
		.funitem{
			image{
				width:44rpx;
				height:44rpx;
			}
		}
	}
	.com-list:nth-child(2){
		.funitem{
			image{
				width:56rpx;
				height:56rpx;
			}
		}
	}
	.com-list:nth-child(3),.com-list:nth-child(5){
		.funitem{
			image{
				width:60rpx;
				height:60rpx;
			}
		}
	}
	.com-list:nth-child(4){
		.funitem{
			image{
				width:48rpx;
				height:52rpx;
			}
		}		
	}
}
.backicon{
	width: 16rpx;
	height: 30rpx;
	display: inline-block;
	position: relative;
	top: 36rpx;
}
.recruit-box{
	border-bottom: 12rpx solid #F5F5F5;
	.labels{
		width: 33%;
		line-height: 106rpx;
		text-align: center;
	}
	.icon{
		margin-right: 10rpx;
		width: 35rpx;
		height: 36rpx;
		display: inline-block;
		position: relative;
		top: 10rpx;
		image{
			width: 35rpx;
			height: 36rpx;
		}
	}
}
</style>
